<template>
    <div class="common-layout">
        <el-container>
            <el-header style="width: 390px;">
                <div style="margin: 0;padding: 0;display: flex;flex-direction: row;">
                    <div style="height: 50px;margin-top: 20px;margin-left: 7px;">
                        <el-icon @click = "jump1(data1.id)" style="font-size: 30px; width: 30px;height: 50px;"><ArrowLeftBold  /></el-icon>
                    </div>
                    <div style="height: 80px;">
                        <p style="font-size: 20px;margin-left: 35px;margin-top: 30px;">编辑文章</p>
                    </div>
                 </div>
            </el-header>
            <el-main style="margin-top: 20px;">
                <div>
                    <img style="width: 70px;height: 100px;" :src="data1.imgUrls">
                </div>
                <div style="margin-top: 10px;">
                    <div style="width: 350px">
                        <p style="font-family: 宋体;font-size: 25px;font-weight: bold;">{{data1.title}}</p>
                    </div>
                    <el-input v-model="data1.content" style="width: 350px;height: 300px;" placeholder="想说点什么吗，就写在这里" />
                </div>
                <div></div>
            </el-main>
            <el-footer>
                <div style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 30px;">
                    <div><el-button style="width: 70px;margin-left: 20px;">视频</el-button></div>
                    <div><el-button style="width: 70px;margin-left: 10px;">美食</el-button></div>
                    <div><el-button style="width: 70px;margin-left: 10px;">家装</el-button></div>
                    <div><el-button style="width: 70px;margin-left: 10px;">影视</el-button></div>
                    <div><el-button style="width: 70px;margin-left: 20px; margin-top: 10px;">科学科普</el-button></div>
                    <div><el-button style="width: 70px;margin-left: 10px;margin-top: 10px;">汽车</el-button></div>
                    <div><el-button style="width: 70px;margin-left: 10px;margin-top: 10px;">手工</el-button></div>
                </div>
                <div>
                    <el-button @click = "change(data1.id)" style="width: 310px;margin-left: 20px;margin-top: 100px;" type="primary" round>更改文章</el-button>
                </div>
            </el-footer>
         </el-container>
    </div>
    
 
  <RouterView />
</template>

<style scoped>
:deep(.el-input__inner) {
  border-color: gainsboro;          /* 替换为你想要的边框颜色 */
}
</style>

<script setup>
 import {ArrowLeftBold,Edit} from "@element-plus/icons-vue"
 import { useRouter } from 'vue-router';
 import {ref ,onMounted} from "vue"
 import { ElMessage } from 'element-plus'
const router11 = useRouter();
const jump1 = (id) => {
  // 如果是内部路由跳转 (Vue Router)
  router11.push({path:'/kexuekepuNeirong',query:{myid:id}})


};
// //查看数据详情
const data1 = ref({
    id:"",
    title:"",
    imgUrls:"",
    content:""
})
//查看数据
const router3 = useRouter();
const edit=()=>{
    fetch("http://localhost:3000/articles/"+router3.currentRoute.value.query.myid,{
                    method:"get"
                }).then(response=>response.json()).then((data)=>{
                    data1.value = data
                    console.log(data1.value)

                })
}

onMounted(()=>{
    edit()
})
// 更改数据
const router4 = useRouter();
const change=(id)=>{
    fetch("http://localhost:3000/articles/"+id,{
        method:'put',
        body:JSON.stringify(data1.value)
    }).then(response=>response.json()).then((data)=>{
        data1.value = data
        ElMessage.success("编辑成功")
        router4.push({path:'/kexuekepuNeirong',query:{myid:id}})
    })
}
</script>